import React from "react";
import {useCount,useBooks, useProList} from "./myHooks";


export default function Index() {
  const [count, add, sub] = useCount();
  const books = useBooks();
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(10);

  const proList = useProList(page,pageSize);

  return (
    <div>
      <h1>自定义 hooks</h1>
      <p>count:{count}</p>
      <input type="button" value="count加法" onClick={()=>add(2)} />
      <input type="button" value="count减法" onClick={sub} />
      <hr/>
      <ul>
        {
            books.map(item=>(
                    <li key={item.id}>
                        <p>
                            <img src={item.img} alt="" />
                        </p>
                        <p>书名：{item.name}</p>
                        <p>价格：{item.price}</p>
                    </li>
                
            ))
        }
      </ul>
        <hr/>
        <p>
            页码：
            <input type="number" value={page} onChange={e=>setPage(e.target.value)} />
            每页多少条：
            <input type="number" value={pageSize} onChange={e=>setPageSize(e.target.value)} />
        </p>
        <ul>
            {proList.map(item=>
                    <li key={item.id}>{item.proname}</li>
                )
            }
        </ul>
    </div>
  );
}
